<template>
    <div>
        <div id="head">
            <h1 style="font-size: 50px;color: white;position: absolute;top: 150px;left: 650px">约饭</h1>
        </div>
        <el-form :inline="true" :model="form" status-icon ref="form"
                 style="width: 80%;"
                 label-width="200px">
            <el-form-item label="人数">
                <el-input v-model="form.count" placeholder="请输入人数"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="预约时间">
                <div class="block">
                    <el-date-picker
                        v-model="form.time"
                        type="datetime"
                        placeholder="请选择用餐时间"
                        align="right"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </el-form-item>
            <br>
            <el-form-item label="位置偏好">
                <el-select v-model="form.position" clearable placeholder="请选择位置偏好">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>

            </el-form-item>

        </el-form>

        <el-button type="primary" @click="dialogVisible = true">立即预约</el-button>

        <el-dialog
            title="预定方式选择"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>请选择您的预定方式</span>
            <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
    <el-button type="primary" @click="Submit(0)">线上订餐</el-button>
    <el-button type="primary" @click="Submit(1)">到店点餐</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "YuYue",
        data() {
            return {
                dialogVisible: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '一小时后',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 );
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '两小时后',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 2);
                            picker.$emit('pick', date);
                        }
                    },{
                        text: '明天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                options: [
                    {
                        value: '0',
                        label: '大堂'
                    }, {
                        value: '1',
                        label: '靠窗'
                    }, {
                        value: '2',
                        label: '包间'
                    }],
                form: {
                    count:'',
                    time:'',
                    position:'',
                    type:''
                },
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            Submit(type) {
                this.form.type = type
                var userId = JSON.parse(window.localStorage.getItem('user')).userId
                request.post("/yuyue/submit/"+ userId,this.form).then(res => {
                    if (res.code === "200") {
                        this.$notify.success("预约成功，预约号为"+res.data.yuyueId + "，餐桌号为"+res.data.deskId +"\n请凭借预约号和餐桌号到餐厅就餐")
                        if (type == 0){
                            this.$router.push("/diancan")
                        }
                    }else {
                        this.$message.error("餐桌已满")
                    }

                })

            },
        },
        mounted() {
            if (!(this.$store.state.islogin)) {
                this.$message.warning("清先登录")
                this.$router.push("/userlogin")
            }

            this.getAllClothesMaterial();
            this.getAllClothesKind();
            this.getZheKouLv()

        }
    }
</script>

<style scoped>
    #head {
        height: 350px;
        background-image: url("../../assets/aboutbackground.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>